<template>
  <div class="introduction-container">
    <section class="hero">
      <div class="hero-text">
        <h1>信息工程学简介</h1>
      </div>
    </section>
    <div class="content">
      <div class="info-section">
        <CoreOverview :overview="overview" />
      </div>
      <div class="stats-section">
        <KeyStatistics :statistics="statistics" />
      </div>
    </div>
    <div class="timeline-section">
      <Timeline :stages="stages" />
    </div>
    <div class="knowledge-section">
      <KnowledgePoints :points="knowledgePoints" />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import CoreOverview from '@/components/CoreOverview.vue';
import KeyStatistics from '@/components/KeyStatistics.vue';
import Timeline from '@/components/Timeline.vue';
import KnowledgePoints from '@/components/KnowledgePoints.vue';

const overview = ref({
  title: '信息工程学',
  content: '信息工程学是21世纪的“智能”工程学，标志着人类社会在经过了农业社会和工业社会的发展后，迈向了信息社会。信息工程学关注信息的生成、传递、收集、存储和处理等五大要素，是一门利用信息的力量的学科。',
});

const statistics = ref([
  { label: '奠基人', value: '克劳德·香农' },
  { label: '核心要素', value: '5大要素' },
  { label: '应用领域', value: '机器人学、自动驾驶、无人机等' },
]);

const stages = ref([
  { icon: 'el-icon-time', color: '#409EFF', title: '起源', content: '人类社会从农业社会和工业社会迈向信息社会' },
  { icon: 'el-icon-s-flag', color: '#67C23A', title: '奠基', content: '香农信息理论奠定基础' },
  { icon: 'el-icon-s-grid', color: '#F56C6C', title: '发展', content: '计算机科学、通信和控制工程学推动信息工程学发展' },
  { icon: 'el-icon-s-opportunity', color: '#E6A23C', title: '应用', content: '广泛应用于机器人学、自动驾驶、无人机等领域' },
]);

const knowledgePoints = ref([
  { title: '信息的定义', content: '信息是指我们身边的一切事物，与生命、心灵、知识体系等概念紧密相关' },
  { title: '信息工程学的五大要素', content: '生成、传递、收集、存储、处理' },
  { title: '奠基人', content: '克劳德·香农，被誉为“信息论的创始人”，提出了比特这一信息量的度量单位' },
  { title: '应用领域', content: '机器人学、自动驾驶、无人机、数字家电、智能手机等' },
  { title: '未来展望', content: '泛在信息社会，普适计算，使人们能够随时随地享受信息服务' },
]);
</script>

<style scoped>
.hero {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 30px;
  border-radius: 16px;
  background: linear-gradient(120deg, rgba(207, 255, 64, 0.12), rgba(227, 107, 33, 0.1));
  border: 1px solid rgba(255, 182, 64, 0.2);
}

.hero-text {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.introduction-container {
  padding: 20px;
  background-color: #f0f0f0f0;
}

.header {
  text-align: center;
  margin-bottom: 20px;
}

.content {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.info-section, .stats-section {
  width: 48%;
}

.timeline-section, .knowledge-section {
  margin-bottom: 20px;
}

.card {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  transition: transform 0.3s, box-shadow 0.3s;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

@media (max-width: 768px) {
  .content {
    flex-direction: column;
  }

  .info-section, .stats-section {
    width: 100%;
    margin-bottom: 20px;
  }
}
</style>